<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Demo Page</title>
		<style>
		html {
			overflow-y:scroll;
			border-top:10px solid black;
		}
		body {
			background-color:#fafafa;
			padding:50px;
			font:normal normal 14px/normal "Times New Roman",Times,Serif;
			color:black;
			text-align:center;
		}
		#view {
			width:98%;
			height:400px;
			border:5px solid #666;
			margin:15px auto 0;
			background:white url('') no-repeat 50% 50%;
		}
		input {
			border:1px solid #bbb;
			font:normal bold 12px/normal Arial,Sans-Serif;
			color:black;
			padding:5px 5px;
			display:inline-block;
			vertical-align:middle;
			margin:0;
			width:80%;
			background-color:white;
		}
		#sharelink {width:70%}
		table {
			text-align:left;
			width:98%;
			margin:0 auto;
			border-collapse:collapse;
		}
		table td {
			padding:10px;
			border:1px solid #bbb;
		}
		</style>
	</head>

	<body>
	<h1>Demo - JavaScript to Set Value from URL</h1>
	<table border="1">
		<tbody>
			<tr><td>Nama Pemilik:</td><td><input id="name" type="text" value="" /></td></tr>
			<tr><td>URL:</td><td><input id="site" type="text" value="" /></td></tr>
			<tr><td colspan="2"><h2>Share This!</h2><button id="generate">Generate URL!</button>&nbsp;&nbsp;<input id="sharelink" type="text" value="" /></td></tr>
		</tbody>
	</table>
	<iframe id="view" style="height:400px;width:98%;"></iframe>
	<script>

	function getUrlQueryString(param) {
		var outObj = {};
		var qs = window.location.search;
		if (qs != "") {
			qs = decodeURIComponent(qs.replace(/\?/, ""));
			var paramsArray = qs.split("&");
			var length = paramsArray.length;
			for (var i=0; i<length; ++i) {
				var nameValArray = paramsArray[i].split("=");
				nameValArray[0] = nameValArray[0].toLowerCase();
				if (outObj[nameValArray[0]]) {
					outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
				} else {
					if (nameValArray.length > 1) {
						outObj[nameValArray[0]] = nameValArray[1];
					} else {
						outObj[nameValArray[0]] = true;
					}
				}
			}
		}
		var retVal = param ? outObj[param.toLowerCase()] : qs;
		return retVal ? retVal : "";
	}

	// Set variable here...
	var name = getUrlQueryString("name"),
		url  = getUrlQueryString("url");
	window.onload = function() {
		document.getElementById('name').value = name;
		document.getElementById('site').value = url;
		document.getElementById('view').src = url;
		document.getElementById('generate').onclick = function() {
			document.getElementById('sharelink').value = window.location.href;
			document.getElementById('sharelink').focus();
			document.getElementById('sharelink').select();
		};
	};

	</script>

	<p><a href="http://hompimpaalaihumgambreng.blogspot.com/2012/04/set-value-based-url-in-address-bar.html">Taufik Nurrohman</a></p>

	</body>
</html>
